<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js"></script>
    <script src="./jq购物车.js"></script>
    <style type="text/css">
        h1 {
            text-align: center
        }

        table {
            margin: 0 auto;
            width: 60%;
            border: 2px solid #09C;
            border-collapse: collapse
        }

        table th,
        table td {
            border: 2px solid #09C;
            padding: 5px;

        }

        th {
            background-color: #0CC;
        }
    </style>
</head>

<body>
    <h1>真划算</h1>
    <table>
        <tr>
            <th>商品</th>
            <th>单价(元)</th>
            <th>颜色</th>
            <th>库存</th>
            <th>好评率</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>罗技M185鼠标</td>
            <td>80</td>
            <td>黑色</td>
            <td>893</td>
            <td>98%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
        <tr>
            <td>微软X470键盘</td>
            <td>150</td>
            <td>黑色</td>
            <td>9028</td>
            <td>96%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
        <tr>
            <td>蓝牙耳机</td>
            <td>100</td>
            <td>蓝色</td>
            <td>8937</td>
            <td>95%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
        <tr>
            <td>金士顿U盘</td>
            <td>70</td>
            <td>红色</td>
            <td>482</td>
            <td>100%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
    </table>

    <h1>购物车</h1>
    <table>
        <thead>
            <tr>
                <th>选中</th>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th colspan="2">删除</th>
            </tr>
        </thead>
        <tbody id="goods">
            <tr>
                <td align="center"><input type="checkbox" class="j-checkbox" /></td>
                <td>罗技M185鼠标</td>
                <td class="unitPrice">￥80.10</td>
                <td align="center">
                    <input type="button" value="-" class="decrease" />
                    <!-- <input type="number" size="3" class="itxt" value="1" /> -->

                    <!-- disabled禁用 -->
                    <!-- <input type="text" size="3" disabled class="itxt" value="1" /> -->
                    <input type="text" size="3" class="itxt" value="1" />

                    <input type="button" value="+" class="increase" />
                </td>
                <td class="price">￥80.14</td>
                <td align="center" colspan="2">
                    <input type="button" value="x" class="del" />
                </td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" class="j-checkbox" /></td>
                <td>罗技M185鼠标</td>
                <td class="unitPrice">￥80.14</td>
                <td align="center">
                    <input type="button" value="-" class="decrease" />
                    <!-- <input type="number" size="3" class="itxt" value="1" /> -->

                    <!-- readonly无法修改 -->
                    <!-- <input type="text" size="3" readonly class="itxt" value="1" /> -->
                    <input type="text" size="3" class="itxt" value="1" />

                    <input type="button" value="+" class="increase" />
                </td>
                <td class="price">￥80.14</td>
                <td align="center" colspan="2">
                    <input type="button" value="x" class="del" />
                </td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="2" align="left">
                    <label><input type="checkbox" id="checkall">全选</label>
                </td>
                <td colspan="4" align="center">
                    已选择 <span id="total_quantity">0</span> 件商品
                    应付总额：￥<span id="total_price">0</span>
                </td>
                <td>
                    <button class="removeBatch">删除被选中的商品</button>
                    <button class="clearAll">清理购物车</button>
                </td>
            </tr>
        </tfoot>

    </table>
</body>

</html>